import React from 'react';
import { Link } from 'react-router-dom';
import { Row, Col, message } from 'antd';
import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
import ReactPullToRefresh from '../../external_module/pull_to_refresh/index';
import MobileNewsList from '../store/mobile_newslist'
// 上啦加载，下拉刷新模块
import LoadMore from './load_more';
import Slider from './slider';

@inject((stores) => {
  const store = {
    appState: stores.appState,
    mobileNewsList: stores.mobileNewsList,
  }
  return store
})
@observer
class MobileList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNum: 1,
      isLoading: true,
    }
    this.getMoreNews = this.getMoreNews.bind(this)
    this.handleRefresh = this.handleRefresh.bind(this)
  }
  componentDidMount() {
    this.getNews(1);
  }
  // 请求新闻
  getNews(pageNum) {
    this.setState({
      isLoading: true,
    })
    return new Promise((resolve, reject) => {
      const { channel, count } = this.props
      this.props.mobileNewsList
        .getMobileListNews(decodeURIComponent(channel), count, pageNum)
        .then((data) => {
          this.setState({
            isLoading: false,
          })
          resolve(data)
        })
        .catch((e) => {
          message.error(e)
          reject(e)
        })
    })
  }
  // 点击获得更多的新闻
  getMoreNews() {
    const number = this.state.pageNum * this.props.count
    if (number >= this.props.mobileNewsList.total) {
      return
    }
    this.getNews(this.state.pageNum + 1).then(() => {
      this.setState({
        pageNum: this.state.pageNum + 1,
      })
    });
  }
  getListAllNews() {
    let news = []
    const { newsList } = this.props.mobileNewsList
    for (let i = 1; i <= this.state.pageNum; i += 1) {
      const key = `${decodeURIComponent(this.props.channel)}${i}`
      if (newsList.get(key)) {
        const { data } = newsList.get(key)
        news = news.length ? news.concat(data.slice())
          :
          newsList.get(key).data
      }
    }
    return news
  }
  // 上拉刷新
  handleRefresh(resolve) {
    this.props.mobileNewsList.refresh(this.props.channel, this.props.count, this.state.pageNum)
    this.setState({
      pageNum: 1,
    })
    resolve()
  }
  asyncBootstrap() {
    return new Promise((resolve, reject) => {
      const channel = decodeURIComponent(this.props.channel)
      // this.props.appState.serActiveChannel(channel)
      this.props.mobileNewsList
        .getMobileListNews(channel, this.props.count)
        .then(() => resolve(true)).catch(reject)
    })
  }
  render() {
    const { total } = this.props.mobileNewsList
    const news = this.getListAllNews()
    return (
      <div className="m-news-module">
        <Row>
          {news.length ?
            <Col span={24}>
              <ReactPullToRefresh
                onRefresh={this.handleRefresh}
                distanceToRefresh={60}
                hasMore={news.length < total}
                isLoading={this.state.isLoading}
                icon={<span className="genericon genericon-next">下拉刷新</span>}
                disabled={false}
                loadMore={this.getMoreNews}
              >
                <Slider imgList={news.slice(0, 5)} />
                <ul className="m-news-list">
                  {news.map(newsItem => (
                    <li key={newsItem.id} className="m-newslist-item">
                      <div className="m-news-img">
                        <Link to={`/detail/${newsItem.id}`}>
                          <img src={newsItem.pic} alt={newsItem.title} />
                        </Link>
                      </div>
                      <div className="m-news-info">
                        <h3 className="m-news-title">
                          <Link to={`/detail/${newsItem.id}`}>{newsItem.title}</Link>
                        </h3>
                        <span className="m-news-type">
                          {newsItem.src}
                        </span>
                        <span className="m-news-time">
                          {newsItem.time}
                        </span>
                      </div>
                    </li>))
                  }
                </ul>
                <LoadMore
                  isLoading={this.state.isLoading}
                  hasMore={news.length < total}
                  getMore={this.getMoreNews}
                />
              </ReactPullToRefresh>
            </Col>
            :
            <div className="loading">加载中...</div>
        }
        </Row>
      </div>
    )
  }
}
export default MobileList;

MobileList.propTypes = {
  channel: PropTypes.string,
  count: PropTypes.string,
  mobileNewsList: PropTypes.instanceOf(MobileNewsList),
}
